import {AliwangwangOutlined} from '@ant-design/icons'
import {withRouter} from 'react-router-dom'
// import marked from 'marked'
// import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import './index.less'
import '../../../assets/css/markdown.less'

function BlogItem(props){
  const msg = props.blog
  // console.log('msg',msg)
  // const renderer = new marked.Renderer()
  // marked.setOptions({
  //   renderer:renderer,
  //   gfm:true,
  //   pedantic:false, // 不保证完全正确，如果有错会帮我们修改一下
  //   sanitize:false, //忽略html  一般都不 
  //   tables:true,
  //   breaks:true,
  //   smartLists:false,
  //   highlight:function(code){
  //     return hljs.highlightAuto(code).value
  //   }
  // })
  // var myString = msg.detail.replace(/↵/gm, "\n"); // 这一步很重要 是把 ↵ 替换成换行之后 才能正常的解析markdiwn
  // const markDown = marked(myString.slice(1,myString.length-1)).slice(0,400)

  const toDetail = ()=>{
    props.history.push(`/blogDetail?id=${msg.blogid}`)
  }

  return (
    <div className="gutter-bolg column cardBox">
      <p className="article-title" onClick={toDetail}>{msg.blogtitle}</p>
      <p className="article-content" onClick={toDetail}>{msg.blogdesc}</p>
      {/* <p className="article-content markdown" dangerouslySetInnerHTML={{__html:markDown}} onClick={toDetail}></p> */}
      <div className="article-footter flex-between">
        <div className="flex-center">
          <ul className="flex-center">
            <li className="tagItem">{msg.original===1?'原创':'转发'}</li>
          </ul>
          <ul className="flex-center watch-data">
            <li><AliwangwangOutlined style={{fontSize:'20px'}} />{msg.watchcount}阅读</li>
            <li><AliwangwangOutlined style={{fontSize:'20px'}} />{msg.commentcount}评论</li>
            <li><AliwangwangOutlined style={{fontSize:'20px'}} />{msg.thumbscount}点赞</li>
          </ul>
        </div>
        <div>
          {/* <span>发布</span><span>博客于1月前</span> */}
          <span>发布</span><span>{msg.createtime}</span>
        </div>
      </div>
    </div>
  )
}

export default withRouter(BlogItem)